<template>
  <div id="friend-push-body">
    <header id="header" class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="$router.goBack()"></a>
      <h1 class="mui-title">新朋友</h1>
    </header>
    <div class="friend-push-list margin-top-60">
      <div class="mui-input-row mui-search search-panel">
        <input
          type="search"
          placeholder="搜索用户"
          data-input-clear="1"
          data-input-search="1"
          class="mui-input-clear"
          
        />
        <span class="mui-icon mui-icon-clear mui-hidden"></span>
        <span @click="goAddFriend" class="mui-placeholder">
          <span></span>
        </span>
      </div>
      <ul class="mui-table-view">
        <li v-for="(friendPushItem,index) in friendPushList" class="mui-table-view-cell mui-media">
          <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" :src="friendPushItem.user_header" />
            <div class="mui-media-body">
              {{ friendPushItem.user_name }}
              <p class="mui-ellipsis">{{ friendPushItem.content }}</p>
            </div>
            <div v-if="friendPushItem.now_status == '待处理'" class="friend-push-item-action">
              <button
                type="button"
                class="mui-btn mui-btn-success"
                @click="agreePush(friendPushItem.friend_push_id,friendPushItem.user_name)"
              >同意</button>
              <button
                type="button"
                class="mui-btn mui-btn-danger"
                @click="refusePush(friendPushItem.friend_push_id,index)"
              >拒绝</button>
            </div>
            <div v-else class="friend-push-item-action">
              <span>{{ friendPushItem.now_status }}</span>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import { api } from "../assets/js/api";
import { Toast } from "vant";

export default {
  data() {
    return {
      friendPushList: []
    };
  },
  methods: {
    goBack: function() {
      this.$router.go(-1);
    },
    goAddFriend : function(){
      this.$router.push({ path : "/AddFriend"});
    },
    refusePush: function(friend_push_id, index) {
      axios({
        url: api.friend.refusePush,
        method: "post",
        data: {
          friend_push_id: friend_push_id
        }
      }).then(res => {
        res = res.data;
        if (res.code) {
          this.friendPushList[index]["now_status"] = "已拒绝";
        }
        Toast(res.msg);
      });
    },
    agreePush: function(friend_push_id, user_name) {
      this.$router.push({
        path: "/AgreeFriendPush",
        query: {
          friend_push_id: friend_push_id,
          user_name: user_name
        }
      });
    }
  },
  created() {
    axios({
      url: api.friend.getMyFriendPush,
      method: "post"
    }).then(res => {
      this.friendPushList = res.data.data;
    });
  }
};
</script>
<style>
.friend-push-item-action {
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  right: 3px;
  top: 13px;
  line-height: 40px;
}
.friend-push-item-action button {
  margin-right: 3px;
}
.friend-push-item-action span {
  font-size: 14px;
  margin-right: 10px;
  color: #8f8f94;
}
.friend-push-list .mui-table-view-cell a {
  position: relative;
}
.friend-push-list .mui-ellipsis {
  width: 150px;
}
</style>